<template>
  <div>

    <Card style="width:100%">
      <row type="flex" justify="space-between">
        <i-col>

          <span class="key" style="margin-left: 20px">RFID:</span>
          <Input v-model="rfid" placeholder="请输入rfid" class="width-condition" style="width: 180px"/>

          <span class="key" style="margin-left: 20px">物料编码:</span>
          <Input v-model="goodsNo" placeholder="请输入物料编码" class="width-condition" style="width: 180px"/>

          <span class="key" style="margin-left: 20px">物料名称:</span>
          <Input v-model="goodsName" placeholder="请输入物料名称" class="width-condition" style="width: 180px"/>

          <span class="key" style="margin-left: 20px">出库人:</span>
          <Input v-model="inOutUser" placeholder="请输入出库人" class="width-condition" style="width: 180px"/>

          <span class="key" style="margin-left: 20px;margin-top: 20px">入库时间:</span>
          <DatePicker type="datetime"
                      @on-change="getInOutDate"
                      placeholder="请输入出库时间"
                      format="yyyy-MM-dd"
                      style="width: 200px;margin-top: 10px;margin-left: 10px"></DatePicker>

          <Button type="success" icon="ios-search" style="margin-left: 90%;margin-top: 10px" @click="find">查询</Button>
        </i-col>
      </row>
    </Card>

    <Table stripe :columns="columns" :data="data"></Table>

    <row style="margin-top: 10px">
      <i-col align="right">
        <Page show-sizer :total="total" show-total @on-change="onChange" @on-page-size-change="onPageSizeChange"/>
      </i-col>
    </row>

  </div>
</template>

<script>
  import { InOutWarehouseFindAll} from "../../../api/data"

  export default {
    data() {
      return {
        page: 1,//page 第几页
        pageSize: 10,//pageSize:每页几条数据
        total: 0,
        type: '1',
        goodsNo: '',
        goodsName: '',
        inOutUser:'',
        storagetimeTime:'',
        rfid:'',
        columns: [
          {
            title: 'RFID',
            key: 'rfid'
          },
          {
            title: '物料编码',
            key: 'goodsNo'
          },
          {
            title: '物料名称',
            key: 'goodsName'
          },
          {
            title: '数量',
            key: 'quantity'
          },
          {
            title: '重量',
            key: 'weight'
          },
          {
            title: '出库人',
            key: 'inOutUser'
          },
          {
            title: '出库时间',
            key: 'storagetimeTime'
          },
          {
            title: '生产日期',
            key: 'productionDate'
          },
          {
            title: '描述',
            key: 'description'
          },
        ],
        data: []
      }
    },
    mounted() {
      this.InOutWarehouseFindAll();
    },
    methods: {
      getInOutDate: function (storagetimeTime) {
        this.storagetimeTime = storagetimeTime;
      },
      find() {
        this.InOutWarehouseFindAll();
      },
      InOutWarehouseFindAll() {
        var data = {
          page: this.page,
          pageSize: this.pageSize,
          type: this.type,
          goodsNo: this.goodsNo,
          goodsName: this.goodsName,
          inOutUser: this.inOutUser,
          storagetimeTime: this.storagetimeTime
        };
        InOutWarehouseFindAll(data).then(data => {
          if (data.data.code == 0) {
            //   console.log(this.data)
            this.data = data.data.data.list;
            this.total = data.data.data.total;
          }
        })
      },
      onPageSizeChange(pageSize) {
        this.page = 1;
        this.pageSize = pageSize;
        this.InOutWarehouseFindAll();
      },
      onChange(page) {
        this.page = page;
        this.InOutWarehouseFindAll();
      },
    }
  }
</script>

<style>
  .width-condition {
    width: 150px;
    margin-left: 10px;
    margin-right: 10px;
  }
</style>
